<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/viewDiscussList.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/pub_area.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation-horiz.css" />
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	<script src="<%=request.getContextPath()%>/js/validation.js" type="text/javascript"></script>
	<script>
	var editors = [];
	$(function(){
		 var options1 = {navigation: 'hover',direction:  'right'};
	     $('.ppy1').popeye(options1);
		var editorList = $("textarea[name='comment.content']");
		$.each(editorList, function(i, val) {
			KindEditor.ready(function(K) {
			editors[i] =	K.create(val, {
				
							resizeType : 1,
							allowPreviewEmoticons : false,
							allowImageUpload : true,
							filePostName:'kindImgFile',
							uploadJson:'harry/fileUpload',
							afterUpload : function(self, data) {
				                  addCommentPhotos(data.id, "formContent_discuss");
		                    },
		                    afterChange : function() {
			   				     
			  				      var limitNum = 2000;  //设定限制字数
			  				      var pattern = '还可以输入' + limitNum + '字';
			  				      $('.word_surplus').html(pattern); //输入显示
			  				      if(this.count('text') > limitNum) {
			  				       pattern = ('字数超过限制，请适当删除部分内容');
			  				       //超过字数限制自动截取
			  				       var strValue = editor.text();
			  				       strValue = strValue.substring(0,limitNum);
			  				       editor.text(strValue);      
			  				       } else {
			  				       //计算剩余字数
			  				       var result = limitNum - this.count('text');
			  				       pattern = '还可以输入' +  result + '字';
			  				       }
			  				       $('.word_surplus').html(pattern); //输入显示
			  				      ////////
			  				     } ,
							items : [
								 'emoticons', '|', 'image']
						});
			});
		});
	});

	function sync() {
		$.each(editors, function(i, editor) {
			editor.sync("comment.content");
		});
	}

	function articleComment(form)
	{
		var a = LiveValidation.massValidate( [ discussTitleVerify] );
		 var invalidSize = $('.LV_invalid_field').size();
		 if(invalidSize>0){
			 return;
		 }
		sync();
		form.submit();
	}

	function replyComment(form) {
		sync();
		form.submit();
		
	}

	var discussTitleVerify;
	 $(function(){
		 
		 discussTitleVerify = new LiveValidation('discussTitle' , {onlyOnBlur: true});
		 discussTitleVerify.add(Validate.Presence, { failureMessage: "请写一个标题"} );
		 discussTitleVerify.add( Validate.Length, { minimum: 1,maximum:30, tooShortMessage:"标题不少于1字", tooLongMessage:"标题不超过30字" } );

	});
	</script>
	
</bsl:layout-component>
<bsl:layout-component name="title">
${article.title}-贴吧
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set value="<%=request.getContextPath()%>" var="contextPath"></c:set>
<div class="head_nav" >
	<a href="${contextPath}/viewArticleDetails?article.id=${article.id}" rel="external" title="${article.title}">${article.title}</a>
		&nbsp;&gt;&gt;&nbsp;<span style="color: #888">贴吧</span>
</div>

<div class="discuss_main_area">
  		<jsp:include page="discussList.jsp">
 			<jsp:param value="${discussComments}" name="discussComments"/>
 			<jsp:param value="${article}" name="article"/>
	</jsp:include>

</div>
	<jsp:include page="../common/pageNum.jsp">
   					<jsp:param value="viewDiscussList?article.id=${article.id}" name="actionName"/>
   					<jsp:param value="${page}" name="page"/>
   	</jsp:include>

	
	<div style="float: none;text-align: left"><button type="button" class="btn btn-danger" onclick="switchReply('pub_area_discuss','${user.userName}', '${contextPath}/viewLogin')">发表新主题贴</button></div>
	<div class="wc_main">
		      <jsp:include page="discussReply.jsp">
       				<jsp:param value="${article}" name="article"/>
       			</jsp:include>
           </div>
</bsl:layout-component>
</bsl:layout-render>